<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>查询页面</title>
	<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
	<link th:href="@{../../css/bootstrap.min.css}" href="../../css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
	<link th:href="@{../../imgs/favicon.ico}" href="../../imgs/favicon.ico" rel="icon" type="image/x-icon" media="all"/>
	<script type="text/javascript" th:src="@{../../js/jquery.min.js}" src="../../js/jquery.min.js" ></script>
	<script type="text/javascript" th:src="@{../../js/bootstrap.min.js}" src="../../js/bootstrap.min.js" ></script>
	<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
	<script type="text/javascript" th:src="@{/js/echarts/echarts.js}"></script>
	<script type="text/javascript" th:src="@{/js/echarts/china.js}"></script>
</head>


<div class="container">

	<div class="row hidden-xs">
		<div style="height:30px"></div>
	</div>
	<div class="row">
		<div class="col-md-12  col-xs-12">
			<div style="text-align: center;">
				<img src="../../imgs/zy-favicon.png" class="img-responsive center-block" width="50px" style="display: inline;">
				<h1 style="display: inline;vertical-align: middle;">海洋生物分类分类查询</h1>
			</div>
		</div>
	</div>
	<br>

	<div class="row">
		<div class="col-md-offset-2 col-md-8 col-xs-12">
			<div style="text-align: center;display: flex">
				<input name="URLz" class="form-control input-lg" value="" placeholder="" type="text" id="inputv" />
				<button class="btn btn-primary input-lg" type="submit" onclick="searchWord()"><strong><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询</strong></button>
			</div>
		</div>
	</div>
	<br>

	<div class="row">
		<div class="col-md-offset-2 col-md-8 col-xs-12" style="text-align: center;">
			<div id="tbk_ad" style="margin-bottom: 5px"></div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-offset-2 col-md-8 col-xs-12" id="xgcx">
		</div>
	</div>
	<br>

	<div class="row">
		<div class="col-md-offset-1 col-md-10 col-xs-12" style="text-align: center;">

			<div class="info-block">
				<h1>
					<span class="item-name" th:text="${wordName}">香瓜子</span>
					<span class="belong-to" th:text="${tt}">&nbsp;属于&nbsp;</span>
					<span class="item-type" th:text="${wordTpye}">湿垃圾</span>
				</h1>
			</div>
			<br>			<br>
			<div style="display:inline-block">
				<div style="display: inline;">&nbsp;</div>
				<div style="display: inline;" class="addthis_inline_share_toolbox"></div>
			</div>

			<div id="adsense_middle"></div>
		</div>
	</div>

	<br>
	<div class="row">
		<div class="col-md-offset-1 col-md-10 col-xs-12" id="jqcx">


		</div>
	</div>

	<br>

	<div class="row">
		<div class="col-md-offset-1 col-md-10 col-xs-12">
			<div id="adsense_bottom"></div>
		</div>
	</div>
	<br>

	<br>

	<!-- 第一行 -->
	<div class="row new-style">
		<div class="col-md-4 col-xs-12 styleBox">
			<div class="col-md-3 col-xs-3" style="text-align: center;">
				<img style="max-width: 100px; max-height: 100px;" alt="海洋浮游生物" src="../../imgs/分类/浮游生物.jpg">
			</div>
			<div class="col-md-9 col-xs-9" style="color: #a84b3f; padding-left: 15px;">
				<h3 style="margin-top: 0px; margin-bottom: 5px;">海洋浮游生物</h3>
				<p style="margin: 0;">这些生物漂浮在水体的表层，随着海流漂移。<br>包括浮游植物（如藻类）和浮游动物（如浮游虫、浮游甲壳类等）。</p>
			</div>
		</div>

		<div class="col-md-4 col-xs-12 styleBox">
			<div class="col-md-3 col-xs-3" style="text-align: center;">
				<img style="max-width: 100px; max-height: 100px;" alt="海洋底栖生物" src="../../imgs/分类/海洋底栖生物.jpg">
			</div>
			<div class="col-md-9 col-xs-9" style="color: #b46c39; padding-left: 15px;">
				<h3 style="margin-top: 0px; margin-bottom: 5px;">海洋底栖生物</h3>
				<p style="margin: 0;">生活在海底的生物，如海星、海胆、螃蟹、海洋软体动物（如海螺、海贝）等。</p>
			</div>
		</div>

		<div class="col-md-4 col-xs-12 styleBox">
			<div class="col-md-3 col-xs-3" style="text-align: center;">
				<img style="max-width: 100px; max-height: 100px;" alt="海洋鱼类和其他水生动物" src="../../imgs/分类/海洋鱼类和其他水生动物.jpg">
			</div>
			<div class="col-md-9 col-xs-9" style="color: #b4a439; padding-left: 15px;">
				<h3 style="margin-top: 0px; margin-bottom: 5px;">海洋鱼类和其他水生动物</h3>
				<p style="margin: 0;">包括鱼类、鲸类、海豚、鲨鱼、海龟等。</p>
			</div>
		</div>
	</div>

	<!-- 第二行 -->
	<div class="row new-style">
		<div class="col-md-4 col-xs-12 styleBox">
			<div class="col-md-3 col-xs-3" style="text-align: center;">
				<img style="max-width: 100px; max-height: 100px;" alt="植物" src="../../imgs/分类/植物.png">
			</div>
			<div class="col-md-9 col-xs-9" style="color: #4da83f; padding-left: 15px;">
				<h3 style="margin-top: 0px; margin-bottom: 5px;">植物</h3>
				<p style="margin: 0;">海洋中的植物主要是海藻、海草等，它们通过光合作用进行能量生产。</p>
			</div>
		</div>

		<div class="col-md-4 col-xs-12  styleBox">
			<div class="col-md-3 col-xs-3" style="text-align: center;">
				<img style="max-width: 100px; max-height: 100px;" alt="动物" src="../../imgs/分类/动物.jpg">
			</div>
			<div class="col-md-9 col-xs-9" style="color: #39a2b4; padding-left: 15px;">
				<h3 style="margin-top: 0px; margin-bottom: 5px;">动物</h3>
				<p style="margin: 0;">海洋中的动物种类繁多，从微小的浮游动物到大型的鲸类都有。</p>
			</div>
		</div>

		<div class="col-md-4 col-xs-12 styleBox">
			<div class="col-md-3 col-xs-3" style="text-align: center;">
				<img style="max-width: 100px; max-height: 100px;" alt="真菌" src="../../imgs/分类/真菌.jpg">
			</div>
			<div class="col-md-9 col-xs-9" style="color: #3972b4; padding-left: 15px;">
				<h3 style="margin-top: 0px; margin-bottom: 5px;">真菌</h3>
				<p style="margin: 0;">海洋中也有一些真菌，尽管它们较少，但依然存在。</p>
			</div>
		</div>
	</div>
</div>
</body>
</html>

<script type="text/javascript"  th:inline="javascript">
	var cList = [[${cList}]];
	var sList = [[${sList}]];
	var tList = [[${tList}]];

	var vv = 0;
	var vh = 0;

	console.log(cList);
	console.log(sList);

	$(function(){
		var xgcx = $("#xgcx");
		xgcx.append('<span class="label_title color_1">相关查询：</span>');
		if (cList){
			vv = cList[0].value;
			vh = cList[0].harm;
			console.log(cList);
			console.log(vv);
			for(var i=0; i<cList.length; i++){
				xgcx.append('<a  class ="new_label" href="/user/search/index?word='+cList[i].content+'">'+cList[i].content+'</a> ');
			}
		}

		// 近期查询
		var jqcx = $("#jqcx");
		jqcx.append('<span class="label_title color_2">近期查询：</span>');
		if (sList){
			for(var i=0; i<sList.length; i++){
				jqcx.append('<a class ="new_label" href="/user/search/index?word='+sList[i].content+'">'+sList[i].content+'</a> ');
			}
		}

		jqcx.append('</br><hr/><span class="label_title color_1">TOP 10 ：</span>');
		if (tList){
			for(var i=0; i<tList.length; i++){
				jqcx.append('<a class ="new_label" href="/user/search/index?word='+tList[i].content+'">'+tList[i].content+'</a> ');
			}
		}

	});

	function searchWord() {
		var word = $('#inputv').val();
		window.location.href = "/user/search/index?word="+word;
	}
</script>
<body style="background-color:#ecf0f1">
<div id="container" style="height: 93%;width: 37%; float: right; top: 260px; left: 40px; z-index: 100">

</div>

<style type="text/css">
	.info-block {
		width: fit-content;
		display: inline-block;
		border: 1.3px dashed #3c85ee;
		border-radius: 8px;
		padding: 0px 20px;
	}

	.item-name {
		color: #D42121;
	}

	.belong-to {
		color: #FBbC28;
	}

	.item-type {
		color: #2e2a2b;
	}
	.color_1 {
		color: #3F85F1;
		padding-left: 2px;
	}
	.color_2 {
		color: #ec4335;
		padding-left: 2px;
	}
	.color_3 {
		color: #FCBC27;
		padding-left: 2px;
	}
	.color_4 {
		color: #2FA858;
		padding-left: 2px;
	}
	.new_label {
		display: inline-block;
		padding: 4px 6px;
		margin: 2px 4px;
		line-height: 16px;
		vertical-align: baseline;
		white-space: nowrap;
		background-color: #ecf0f1;;
		color: #404040;
		text-decoration: none;
		border: 1px solid #7ba8ce;
		border-radius: 8px;
	}

	a:hover,a:focus {
		color: #0aa284;
	}

	.panel-body div {
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}

	.list_line div {
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}

	h1 {
		font-size:30px;
		margin-top: 13px;
	}


	ul {
		padding-inline-start:0px;
	}
	ul li {
		list-style: none;
		font-size: 15px;
		line-height: 1.4;
	}

	ul li a {
		float: left;
		color:#333;
	}
	ul li span {
		float: right;
	}

	.fleft {
		float: right;
	}

	.theader {
		border-bottom-color: rgb(183, 9, 9);
		border-bottom-color: #cccccc;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		font-size: 15px;
		font-weight: bold;
		padding: 0px 6px;
		margin-bottom: 5px;
	}

	.city_list a {
		padding: 4px 6px;
		margin: 2px 4px;
		color: black;
		font-size: initial;
	}

	.label_title {
		font-size: 16px;
		font-weight: bold;
	}

	.z_list_a {
		width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.flink a {
		color:#787878;
		margin-right: 10px;
	}
	.pydocx-caps {
		text-transform: uppercase
	}

	.pydocx-center {
		text-align: center
	}

	.pydocx-comment {
		color: blue
	}

	.pydocx-delete {
		color: red;
		text-decoration: line-through
	}

	.pydocx-hidden {
		visibility: hidden
	}

	.pydocx-insert {
		color: green
	}

	.pydocx-left {
		text-align: left
	}

	.pydocx-list-style-type-cardinalText {
		list-style-type: decimal
	}

	.pydocx-list-style-type-decimal {
		list-style-type: decimal
	}

	.pydocx-list-style-type-decimalEnclosedCircle {
		list-style-type: decimal
	}

	.pydocx-list-style-type-decimalEnclosedFullstop {
		list-style-type: decimal
	}

	.pydocx-list-style-type-decimalEnclosedParen {
		list-style-type: decimal
	}

	.pydocx-list-style-type-decimalZero {
		list-style-type: decimal-leading-zero
	}

	.pydocx-list-style-type-lowerLetter {
		list-style-type: lower-alpha
	}

	.pydocx-list-style-type-lowerRoman {
		list-style-type: lower-roman
	}

	.pydocx-list-style-type-none {
		list-style-type: none
	}

	.pydocx-list-style-type-ordinalText {
		list-style-type: decimal
	}

	.pydocx-list-style-type-upperLetter {
		list-style-type: upper-alpha
	}

	.pydocx-list-style-type-upperRoman {
		list-style-type: upper-roman
	}

	.pydocx-right {
		text-align: right
	}

	.pydocx-small-caps {
		font-variant: small-caps
	}

	.pydocx-strike {
		text-decoration: line-through
	}

	.pydocx-tab {
		display: inline-block;
		width: 4em
	}

	.pydocx-underline {
		text-decoration: underline
	}

	/*
    body {
        margin: 0px auto;
        width: 49.61em
    }
    */

	.about_list {
		max-width: 600px;
		display:inline-block;
		text-align: justify;
	}

	/* 新添加的样式，用于调整布局避免文字图片重叠 */
	.new-style img {
		max-width: 80px;
		max-height: 80px;
	}
	.new-style p {
		line-height: 1.5;
	}
	.new-style.row [class^="col-"] {
		padding: 5px;
	}
	.styleBox{
		border: 1px dashed #dfdfdf;
		min-height: 150px;
	}
</style>

